<template>
  <div>
    <div class="main-container">
      <h1 class="maswl">码上未来考试系统</h1>
      <div class="features">
        <h3>主要功能：</h3>
        <ul>
          <li>
            <h4>1. 权限控制</h4>
            <p>
              本系统存在三个不同的角色,教师,管理员,学生三种用户,此系统是基于vue+springboot实现的前后端分离,
              用户权限校验通过JWT生成token令牌发放到用户,并根据令牌对用户的身份合法性进行校验。
            </p>
          </li>
          <li>
            <h4>2. 在线考试</h4>
            <p>
              学生用户在注册登录之后，可以在本系统进行在线的考试，考试可由教师和管理员进行布置并设置考试权限（公开，密码），
              考试题型分为单选，多选，判断，简答题，并支持题目附带配图。考试过程中需打开摄像头进行考试，系统会自动拍摄考生实时考试状态。
            </p>
          </li>
          <li>
            <h4>3. 成绩模块</h4>
            <p>
              参加考试后的学生用户，在提交试卷后进入考试结果页面，页面会自动校对学生用户的逻辑题的对错，
              对于简答题需要老师或者超级管理员进行批阅。对于学生用户参与的考试，学生用户可以查看到考试的详情并可以查看到自己所错的逻辑题。
            </p>
          </li>
          <li>
            <h4>4. 题库模块</h4>
            <p>
              学生用户在题库模块中可以进行题目的功能训练，训练模式分为，顺序练习，随机练习，也可以根据题型练习（单选，多选，判断）。
              用户答题时会实时判断正确与否，并有详细解析功能。
            </p>
          </li>
          <li>
            <h4>5. 题库管理</h4>
            <p>
              超级管理员和教师可以对本考试系统已有的题库进行管理,实现对题库信息的CRUD操作。
            </p>
             <li>
            <h4>6.试题管理</h4>
             <p>
             教师和系统管理员用户有权限对本系统的所有试题进行操作，本系统试题支持复杂类型的题目，考试题目支持多插图，选项答案支持单插图功能。
            </p></li>
          <li>

            <h4>7.考试管理</h4>
            <p>
             教师和系统管理员用户有权限对系统存在的考试进行操作，本系统考试支持公开考试和密码口令考试，并可以对考试进行禁用也可以在设置考试时间段，对于考试可以进行很便利的进行组卷，系统内置两种组卷模式，题库组卷和自由选题组卷。
            </p>
            </li>
            <li>
            <h4>8.考卷批阅</h4>
            <p>
             对于本系统中存在的复杂考试的题目，可以又对应的老师进行批阅，此系统的逻辑题无需老师用户进行批阅，老师的工作仅仅是批阅简答题这种无准确答案类型的题目，极大地减轻了老师用户的工作量
            </p>
            </li>
            <li>
            <h4>9.考试统计</h4>
            <p>
             本系统针对每一次考试进行数据统计和报表，让使用本系统的老师用户能够直观的了解到每一次考试人员的进步。
            </p>
            </li>
            <li>
            <h4>10. 用户管理</h4>
            <p>
            超级管理员可以对注册本系统用户的进行授权，并拥有操作一切用户的权限。
            </p>
            </li>
          </li>
        </ul>
      </div>
    </div>
    <!-- 定义一个弹窗用双向绑定 -->
    <el-dialog v-model="dialogVisible" title="最新公告" @close="handleClose">
      <!-- 使用 v-html 来渲染 HTML 内容 -->
      <div v-html="announcement"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup >
import { ref, onMounted,inject } from 'vue';
import { ElButton, ElDialog } from 'element-plus';


import http from '@/utils/request'
// const $http = inject("$http");

// 定义响应式状态
const announcement = ref('');
const dialogVisible = ref(true);


// 定义 fetchAnnouncement 函数
const fetchAnnouncement = async () => {
  try {
    const { data } = await http.request({
      url: '/student/getCurrentNewNotice',
      method:'get'
    });
      announcement.value = data.data;
      // announcement.value = '<p>暂无公告</p>';
    console.log(data);
    dialogVisible.value = true;
  }
    
   catch (error) {
    console.error('获取公告失败:', error);
    announcement.value = '<p>获取公告失败</p>';
    dialogVisible.value = true; // 确保弹窗显示
  }
};

// 定义 handleClose 函数
const handleClose = () => {
  console.log('弹窗已关闭');
};

// 在组件挂载时调用 fetchAnnouncement
onMounted(() => {

  fetchAnnouncement();
});
</script>

<style scoped>
.main-container {
  padding: 20px;
}

p{
  text-indent: 2em;
}

.features {
  margin-top: 20px;
  /* 左右边距 */
  margin-left: 180px;
  margin-right: 180px;

}

.maswl {
  color: aqua;
  text-align: center; /* 修正 text-align 属性 */
}

.features ul {
  list-style-type: none;
  padding: 0;
}

.features li {
  margin-bottom: 20px;
}

.el-dialog__title {
  font-weight: bold;
}
</style>
